<template>
  <div class="divBox">
  
    <el-card class="box-card" style=" margin-bottom: 50px;">
      <div class="clearfix">
        <!-- <el-tabs v-if="headTab.length > 0" v-model="currentTab" style="pointer-events: none;"> -->
        <el-tabs v-show="headTab.length > 0" v-model="currentTab" >  
          <el-tab-pane
            v-for="(item, index) in headTab"
            :key="index"
            :name="item.name"
            :label="item.title"
            :before-leave="leave"
          />
        </el-tabs>
      </div>
      <el-form
        ref="baseInfoForm"
        v-loading="fullscreenLoading"
        :model="baseInfoForm"
        label-width="130px"
        @submit.native.prevent
      >
       
          <!-- 产品信息--> 
        <div v-show="currentTab === '1'">
          <el-row :gutter="24">
            <!-- <el-col :span="24" v-if="baseInfoForm.source == 1">
              <el-form-item label="同程线路Id：">
                <el-input
                  v-model="baseInfoForm.tc_line_id"
                  :disabled="true"
                  size="small"
                  class="duanWidth"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="!$route.params.id" class="display-flex display-flex-align-center">
              <el-form-item label="同程线路Id：">
                <el-input
                  v-model="baseInfoForm.tc_line_id"
                  placeholder="请输入同程线路id"
                  size="small"
                  class="duanWidth mr-10"  
                />
                <el-button type="primary" size="small" @click="addTcProduct">确认</el-button>
              </el-form-item>
              
            </el-col> -->
            <!-- 产品消息--> 
            <el-col :span="24">
              <el-form-item label="主标题：" prop="store_name"  :rules="ruleValidate.store_name">
                <el-input
                  v-model="baseInfoForm.store_name"
                  placeholder="请输入产品主标题"
                  size="small"
                  class="pageWidth"
                />
              </el-form-item>
            
            </el-col>

            <el-col :span="24">
              <el-form-item label="副标题：" >
                <el-input
                  v-model="baseInfoForm.store_info"
                  type="textarea"
                  maxlength="500"
                  minilength="0"
                  show-word-limit	
                  placeholder="请输入产品副标题"
                  class="pageWidth"
                  size="small"
                />
              </el-form-item>  
            </el-col>
            
            <el-col :span="24">
              <el-form-item label="产品封面图：" prop="image"   :rules="ruleValidate.image">
                <div
                  class="upLoadPicBox"
                  title="750*750px"
                  @click="modalPicTap('1')"
                >
                  <div v-if="baseInfoForm.image" class="pictrue">
                    <img :src="baseInfoForm.image">
                  </div>
                  <div v-else class="upLoad">
                    <i class="el-icon-camera cameraIconfont" />
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="产品轮播图：" prop="slider_image"    :rules="ruleValidate.slider_image">
                <div class="acea-row">
                  <div
                    v-for="(item, index) in baseInfoForm.slider_image"
                    :key="index"
                    class="pictrue"
                    draggable="false"
                    @dragstart="handleDragStart($event, item)"
                    @dragover.prevent="handleDragOver($event, item)"
                    @dragenter="handleDragEnter($event, item)"
                    @dragend="handleDragEnd($event, item)"
                  >
                    <img :src="item">
                    <i
                      class="el-icon-error btndel"
                      @click="handleRemove(index)"
                    />
                  </div>
                  <div
                    v-if="baseInfoForm.slider_image.length < 10"
                    class="uploadCont"
                    title="750*750px"
                  >
                    <div class="upLoadPicBox" @click="modalPicTap('2')">
                      <div class="upLoad">
                        <i class="el-icon-camera cameraIconfont" />
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="主图视频：" prop="video_link">
                <el-input
                  v-model="videoLink"
                  size="small"
                  class="perW50"
                  placeholder="请输入MP4格式的视频链接"
                />
                <input
                  ref="refid"
                  type="file"
                  style="display: none;"
                  @change="zh_uploadFile_change"
                >
                <el-button
                  type="primary"
                  icon="ios-cloud-upload-outline"
                  class="uploadVideo"
                  size="small"
                  @click="zh_uploadFile"
                >
                  {{ videoLink ? "确认添加" : "上传视频" }}
                </el-button>
                <el-col :span="12">
                  <el-progress
                    v-if="upload.videoIng"
                    :percentage="progress"
                    :text-inside="true"
                    :stroke-width="20"
                    style="margin-top: 10px;"
                  />
                </el-col>
                <el-col :span="24">
                  <div v-if="baseInfoForm.video_link" class="iview-video-style">
                    <video
                      style="width:100%;height: 100%!important;border-radius: 10px;"
                      :src="baseInfoForm.video_link"
                      controls="controls"
                    >
                      您的浏览器不支持 video 标签。
                    </video>
                    <div class="mark" />
                    <i class="el-icon-delete iconv" @click="delVideo" />
                  </div>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="平台产品分类："  prop="cate_id"   :rules="ruleValidate.cate_id">
                <el-cascader
                  v-model="baseInfoForm.cate_id"
                  class="pageWidth"
                  size="small"
                  :options="categoryList"
                  :props="props"
                  filterable
                  clearable
                />
              </el-form-item>
            </el-col>

            <el-col v-if="labelList.length" :span="24">
              <el-form-item label="产品标签：">
                <el-select
                  v-model="baseInfoForm.mer_labels"
                  size="small"
                  multiple
                  placeholder="请选择"
                  class="pageWidth"
                >
                  <el-option
                    v-for="item in labelList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
      

            <el-col :span="24" >
              <el-form-item label="截止购买时间：">
                <div class=" display-flex display-flex-align-center">
                  <el-switch
                  v-model="baseInfoForm.limit_deadline"
                  :active-value="1" 
                  :inactive-value="0"
                  :width="55"
                  active-text="开启"
                  inactive-text="关闭"
                />
                <div v-if="baseInfoForm.limit_deadline" class="ml-10 display-flex display-flex-align-center">
                  <span class="mr-10">最晚需在使用前</span>
                  <el-input class="mr-10" v-model="baseInfoForm.deadline_day" placeholder="请输入" type="number" style="width: 80px;"></el-input>
                  <span class="mr-10">天</span>
                  <el-time-picker
                    v-model="baseInfoForm.deadline_hour"
                    placeholder="请选择"
                    size:="mini"
                    format="HH:mm"
                    value-format="HH:mm"
                    style="width: 100px;"
                    class="mr-10"
                    >
                  </el-time-picker>
                  <span>购买</span>
                </div>
                </div>
              </el-form-item> 
            </el-col>
            <el-col :span="24" v-if="baseInfoForm.tour_type==2">
              <el-form-item label="提前检票时间：">
                <el-input style="width:200px;" type="number" placeholder="请输入提前检票时间" v-model="baseInfoForm.check_time">
                  <template slot="append">分钟</template>
                </el-input>
              </el-form-item> 
            </el-col>
            <!-- <el-col :span="18">
              <el-form-item label="预计花费时间：" >
                <el-input type="number" placeholder="请输入预计花费时间" v-model="baseInfoForm.duration" style="width: 300px;">
                  <template slot="append">分钟</template>
                </el-input>
              </el-form-item> 
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="价格（仅展示）：" >
                <el-input type="number" placeholder="请输入" v-model="baseInfoForm.price" style="width:150px">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item> 
            </el-col>
            <el-col :span="18">
              <el-form-item label="库存（仅展示）："  >
                <el-input type="number" placeholder="请输入" v-model="baseInfoForm.stock" style="width: 300px;">
                </el-input>
              </el-form-item> 
            </el-col>
            <el-col  :span="6">
              <el-form-item label="最少购买件数：">
                <el-input-number
                  v-model="baseInfoForm.once_min_count"
                  :min="0"
                  size="small"
                  controls-position="right"
                  placeholder="请输入购买件数"
                  style="width:180px"
                />
                </el-form-item>
            </el-col>

            <el-col  :span="18">
              <el-form-item label="限购数量：" prop="once_max_count">
                <el-input-number
                  v-model="baseInfoForm.once_max_count"
                  :min="baseInfoForm.once_min_count"
                  size="small"
                  controls-position="right"
                  placeholder="请输入购买件数"
                  style="width:180px"
                />
                </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- <el-form-item label="支持退款：">
                <el-switch
                  v-model="baseInfoForm.refund_switch"
                  :active-value="1"
                  :inactive-value="0"
                  :width="55"
                  active-text="开启"
                  inactive-text="关闭"
                />
              </el-form-item>  -->
              <!-- <el-form-item label="是否需实名购买：">
                <el-switch
                  v-model="baseInfoForm.is_auth_buy"
                  :active-value="1"
                  :inactive-value="0"
                  :width="55"
                  active-text="开启"
                  inactive-text="关闭"
                />
              </el-form-item> -->
              
            </el-col>
 
            <el-col :span="24"  v-if="baseInfoForm.tour_type==1">
              <el-form-item label="核销类型：" prop="check_type">
                <el-radio v-model="baseInfoForm.check_type" :label="1">二维码核销</el-radio>
                <el-radio v-model="baseInfoForm.check_type" :label="2">身份证直接验证入园/使用</el-radio>
                <el-radio v-model="baseInfoForm.check_type" :label="3">需指定地点取票</el-radio>
                <!-- <el-radio v-model="baseInfoForm.check_type" :label="4">邮寄纸质票</el-radio> -->
              </el-form-item>         
            </el-col>
            <el-col :span="24"  v-if="baseInfoForm.tour_type==1">
              <el-form-item label="入园或者使用地址：" prop="use_address" label-width="200" >
                <el-input
                  v-model="baseInfoForm.use_address"
                  placeholder="请输入地址"
                  size="small"
                  class="pageWidth"
                />
              </el-form-item>         
            </el-col>

  
            
          </el-row>
        </div>
    
        <!-- 产品描述 -->
        <div   v-show="currentTab ==='2'">
          <el-row >
            <el-col :span="12">
         
              <el-col :span="24">
                <el-form-item label="产品特色：">
                  <wangeditor
                    style="width: 100%"
                    :content="content"
                    @editorContent="getEditorContent"
                ></wangeditor>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="12" >
              <div class="ifam" style="margin-top: 50px;margin-left:150px">
                <div class="content" v-html="content"></div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 套餐设置 -->
        <div v-show="currentTab === '3'">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="产品套餐：" props="meal_type">
                <el-radio-group
                  v-model="baseInfoForm.meal_type"
                     @input="changeMealType"
                >
                  <el-radio :label="0" class="radio">单套餐</el-radio>
                  <el-radio :label="1">多套餐</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" v-if="baseInfoForm.meal_type == 0">

          </el-row>
          <el-row  :gutter="24" v-show="baseInfoForm.meal_type == 1">
            <el-col :span="24">
              <el-form-item label="">
                <el-button
                type="primary"
                icon="el-icon-plus"
                class="mr15"
                size="small"
                @click="addmealShow"
              >添加套餐</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-show="baseInfoForm.ManyMeal && baseInfoForm.ManyMeal.length">
             <div class="display-flex  " style="margin-left: 50px;">
              
                <div @click="selectMealHanele(index)" v-for="(meal ,index) in baseInfoForm.ManyMeal" :class="selectMealIndex==index?'meal-bl-select':'meal-bl-noselect'" class="display-flex-column  mr-20" >
                  <div class="display-flex" style="position: relative;">
                    <div> 套餐{{(index + 1) }} </div>
                    <div @click.stop="editMeal(meal ,index)" v-show="selectMealIndex==index" class="ml-auto"> <i style="color: #3c72e4;" class="el-icon-edit-outline ml-10 text-18" ></i></div>
                    <div class="del-box"  @click.stop="deleteMeal(index)">
                        <span class="iconfont iconcha"></span>
                    </div>
                  </div>
                  <div  class="line2">{{meal.title}}</div>
                </div>
              </div>
            </el-col>
          </el-row>
          
        </div>

         <!-- 价格库存 -->
        <div v-show="currentTab=== '5'"   >
          <el-row >
            <el-col :span="24">
              <div v-if="baseInfoForm.OneMeal&& baseInfoForm.meal_type == 0">
                <mealDatePrice  ref="oneMealDatePrice" @changePriceDate="changeOneMealPriceDate" :dateArr="baseInfoForm.OneMeal.productPriceDate"></mealDatePrice>
              </div>
            </el-col>
            <el-col  :span="24" v-show="baseInfoForm.meal_type == 1 && baseInfoForm.ManyMeal && baseInfoForm.ManyMeal.length ">
              <div class="display-flex  ">
                <div @click="selectMealHanele(index)" v-for="(meal ,index) in baseInfoForm.ManyMeal" :class="selectMealIndex==index?'meal-bl-select':'meal-bl-noselect'" class="display-flex-column  mr-20" >
                  <div class="display-flex">
                    <div> 套餐{{(index + 1) }} </div>
                  </div>
                  <div  class="line2">{{meal.title}}</div>
                </div>
              </div>
               <div v-show="baseInfoForm.meal_type == 1"  v-for="(meal ,index) in baseInfoForm.ManyMeal" >
                <mealDatePrice v-show="selectMealIndex==index"  @changePriceDate="changeManyMealPriceDate" :meal_index="index" :ref="'manyMealDatePrice'+index"  :dateArr="meal.productPriceDate"></mealDatePrice>
              </div>
            </el-col>
        
            
          </el-row>  
        </div>
        <!-- 条款维护 -->
        <div  v-show="currentTab=== '6'">
        
          <caluseSet 
            ref="caluseSet"
            :successData="success"
            :baseInfo="baseInfoForm">
          </caluseSet>
  
        </div> 
        <div class="footer">
          <el-form-item style="margin-top:30px;">
            <el-button
              v-show="currentTab > 1"
              type="primary"
              class="submission"
              size="small"
              @click="handleSubmitUp"
            >上一步
            </el-button>
            <el-button
              v-show="currentTab < 6"
              type="primary"
              class="submission"
              size="small"
              @click="handleSubmitNest('baseInfoForm')"
            >下一步
            </el-button>
            <el-button
              v-show="currentTab == '6' || $route.params.id"
              :loading="loading"
              type="primary"
              class="submission"
              size="small"
              @click="handleSubmit('baseInfoForm')"
            >提交
            </el-button>
            <!-- <el-button
              :loading="loading"
              type="primary"
              class="submission"
              size="small"
              @click="handlePreview('baseInfoForm')"
            >预览
            </el-button> -->
          </el-form-item>
        </div>
       </el-form>  
       <div style="display: none;">{{flag}}</div>
    </el-card>
    
       <!--属性选择弹窗-->
       <el-dialog v-if="attrShow" :visible.sync="attrShow" title="请选择产品规格" width="320px">
        <attr-list :attrs="attrsList" @activeData="activeAttr" @close="labelAttr" @subAttrs="subAttrs" v-if="attrShow"></attr-list>
      </el-dialog>


      <el-dialog
        v-if="mealShowVisible"
        title="添加套餐"
        :visible.sync="mealShowVisible"
        width="50%"
        append-to-body
      >
        <div class="container display-flex display-flex-column display-flex-justify-center">
          <el-form :rules="ruleValidate" :model="tempMeal" label-width="150px" size="small">
            <el-form-item  label="套餐标题：" prop="temp_meal_title"  :rules="ruleValidate.temp_meal_title">
              <el-input v-model="tempMeal.title"  placeholder="请输入套餐标题" class="selWidth" size="small"  /> 
            </el-form-item>

           
          </el-form>
          
        </div> 
        <span slot="footer" class="dialog-footer">
          <el-button @click="mealShowVisible = false" size="small">取消</el-button>
          <el-button v-if="tempMeal.index===''" type="primary" @click="handleAddMeal" size="small">确定添加</el-button>
          <el-button  v-else type="primary" @click="handleEditMeal" size="small">确定修改</el-button>

        </span>    
      </el-dialog> 
    </div>
</template>

<script>
import {
  defaultObj,
} from './formModel.js';

import { roterPre } from '@/settings'
import wangeditor from "@/components/wangEditor/index.vue";
import mealRouteBox from "@/components/mealRouteBox/index.vue";
import mealDatePrice from "@/components/mealDatePrice/index.vue";
import attrList from "@/components/attrList";
import caluseSet from './components/caluseSet.vue';
import vuedraggable from 'vuedraggable'
import Sortable from 'sortablejs'
import templatesFrom from "@/components/templatesFrom"

import {
  shippingListApi,
  templateLsitApi, 
  productCreateApi,
  productDetailApi,
  categoryListApi,
  categoryBrandListApi,
  productUpdateApi,
  productConfigApi,
  productGetTempKeysApi,
  guaranteeListApi,
  productPreviewApi,
  getProductLabelApi,
  specsSelectedApi,
  productSpecsDetailApi,
  generateAttrApi,
  associatedFormList,
  associatedFormInfo,
  unitOptionsApi,
  productUnrelatedListApi,
  unitCreatApi,
  productSaveBaseInfoApi,
  productUpdateBaseInfoApi,
  productUpdatDescApi,
  productUpdatRouteApi,
  productUpdatCaluseApi,
  productUpdateSkuApi,
  guaranteeSelectApi,
  productUpdatePriceDateApi,
  productChangePriceDateApi,
  addTongchengProductCode20Api,
  saveTourProductApi
} from '@/api/product'

import { getCityListApi } from '@/api/system';
import { title } from "@/settings";
import { forEach } from "jszip/lib/object";

const detailForm = {
  traitArr1: {
    key: '',
    val: ''
  },
  traitArr2: {
    key: '',
    val: ''
  },
  traitArr3: {
    key: '',
    val: ''
  },
}
const skuForm = {
  
  attr: [],
  attrValue: [
    { 
      image: '',
      price: null,
      cost: null,
      ot_price: null,
      svip_price: null,
      select: false,
      stock: null,
      cdkey: {},
      library_name: "",
      library_id: "",
    }
  ],
  dateList: [],
  addDateList: [],
  svip_price_type: 0,
  extension_type: 0,
  spec_type: 0,

}
const objTitle = {
  price: {
    title: '售价'
  },
  cost: {
    title: '成本价'
  },
  ot_price: {
    title: '市场价'
  },

  stock: {
    title: '库存'
  },

}
export default {
  name: 'ProductProductAdd',
  components: {
    wangeditor,
    mealRouteBox,
    attrList,
    draggable: vuedraggable,
    mealDatePrice,
    caluseSet
  },
  data() {

    return {
      roterPre: roterPre,
       success: false,
      selectMealIndex:0,
      product_id: '',
      currentTab: '1',
      mealShowVisible: false,
      baseInfoForm: Object.assign({}, defaultObj),
      detailForm: Object.assign({}, detailForm),
   
      tempMeal: {
        id: '',
        title: "",
        day_time: 1,
        night: '',
        start_city: '',
        end_city:'',
        start_city_id: '',
        end_city_id:'',
        start_stop_name: '',
        end_stop_name:'',
        start_stop_id: '',
        end_stop_id:'',
        productRoute: '',
        productPriceDate: [],
        index: ''
      },
      skuForm: Object.assign({}, skuForm),
      formThead: Object.assign({}, objTitle),
      OneattrValue: [Object.assign({}, skuForm.attrValue[0])], // 单规格
      ManyAttrValue: [Object.assign({}, skuForm.attrValue[0])], // 多规格

      fullscreenLoading: false,
      loading: false,
      videoLink: '',
      upload: {
        videoIng: false // 是否显示进度条；
      },
      progress: 10, // 进度条默认0
    
      ruleValidate: {

         store_name: [
          {
            validator: (rule, value, callback) => {
              if (this.currentTab == '1' && !this.baseInfoForm.store_name) {
                callback(new Error('请输入主标题'));
              } else {
                callback();
              }
            },
            required: true,
            trigger: 'blur'
          },
        ],
        image: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.currentTab == '1' && !this.baseInfoForm.image.length) {
                callback(new Error('请上传产品图'));
              } else {
                callback();
              }
            },
            type: 'array',
          },
        ],
        slider_image: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.currentTab == '1' && !this.baseInfoForm.slider_image.length) {
                callback(new Error('请上传产品轮播图'));
              } else {
                callback();
              }
            },
            type: 'array',
          },
        ],

        cate_id: [
          {
            validator: (rule, value, callback) => {
 
              //  if (this.currentTab == '1' && (Array.isArray(this.baseInfoForm.cate_id) && this.baseInfoForm.cate_id.length)) {
              if (this.currentTab == '1' &&  !this.baseInfoForm.cate_id) {
                 callback(new Error('请选择平台分类'));
                
              } else {
               callback();
              }
            },
            required: true,
            type: 'array',
          },
        ],
        day_time: [
          {
            validator: (rule, value, callback) => {
              if (this.currentTab == '3' && !this.baseInfoForm.OneMeal.day_time) {
                callback(new Error('请输入出行天数'));
              } else {
                callback();
              }
            },
            required: true,
            trigger: 'blur'
          },
        ],
        start_city: [
          {
            validator: (rule, value, callback) => {
              setTimeout(() => {
                if (this.currentTab == '3' && !this.baseInfoForm.OneMeal.start_city) {
                  callback(new Error('请选择出发城市'));
                } else {
                  callback();
                }
              },200)
            },
            required: true,
            trigger: 'blur'
          },
        ],
        end_city: [
          {
            validator: (rule, value, callback) => {
             setTimeout( () => {
               if (this.currentTab == '3' && !this.baseInfoForm.OneMeal.end_city) {
                  callback(new Error('请选择目的城市'));
                } else {
                  callback();
                }
             },200)
            },
            required: true,
            trigger: 'blur'
          },
        ],
        start_stop_name: [
          {
            validator: (rule, value, callback) => {

              setTimeout(() => {
                if (this.currentTab == '3' && !this.baseInfoForm.OneMeal.start_stop_name) {
                  callback(new Error('请选择出发站点'));
                } else {
                  callback();
                }
              },200)
            },
            required: true,
            trigger: 'blur'
          },
        ],
        end_stop_name: [
          {
            validator: (rule, value, callback) => {
             setTimeout( () => {
               if (this.currentTab == '3' && !this.baseInfoForm.OneMeal.end_stop_name) {
                  callback(new Error('请选择到达站点'));
                } else {
                  callback();
                }
             },200)
            },
            required: true,
            trigger: 'blur'
          },
        ],

        temp_meal_title: [
          {
            validator: (rule, value, callback) => {
              if (this.currentTab == '3' && !this.tempMeal.title) {
                callback(new Error('请输入套餐标题'));
              } else {
                callback();
              }
            },
            required: true,
            trigger: 'blur'
          },
        ],

        temp_day_time: [
          {
            validator: (rule, value, callback) => {
              if (this.currentTab == '3' && !this.tempMeal.day_time) {
                callback(new Error('请输入出行天数'));
              } else {
                callback();
              }
            },
            required: true,
            trigger: 'blur'
          },
        ],
        temp_start_city: [
          {
            validator: (rule, value, callback) => {
              setTimeout(() => {
                if (this.currentTab == '3' && !this.tempMeal.start_city) {
                  callback(new Error('请选择出发城市'));
                } else {
                  callback();
                }
              },200)
            },
            required: true,
            trigger: 'blur'
          },
        ],
        temp_end_city: [
          {
            validator: (rule, value, callback) => {
             setTimeout( () => {
               if (this.currentTab == '3' && !this.tempMeal.end_city) {
                  callback(new Error('请选择目的城市'));
                } else {
                  callback();
                }
             },200)
            },
            required: true,
            trigger: 'blur'
          },
        ],
        temp_start_stop_name: [
          {
            validator: (rule, value, callback) => {

              setTimeout(() => {
                if (this.currentTab == '3' && !this.tempMeal.start_stop_name) {
                  callback(new Error('请选择出发站点'));
                } else {
                  callback();
                }
              },200)
            },
            required: true,
            trigger: 'blur'
          },
        ],
        temp_end_stop_name: [
          {
            validator: (rule, value, callback) => {
             setTimeout( () => {
               if (this.currentTab == '3' && !this.tempMeal.end_stop_name) {
                  callback(new Error('请选择到达站点'));
                } else {
                  callback();
                }
             },200)
            },
            required: true,
            trigger: 'blur'
          },
        ],

       
      },
  
      
      headTab: [
        { title: '产品信息', name: '1' },
        { title: '产品描述', name: '2' },
        { title: '套餐设置', name: '3' },
        { title: '价格库存', name: '5' },
        { title: '条款维护', name: '6' },
        
      ],
      currentCalTab: "1",
      caluesTab: [
        { title: '费用包含', name: '1' },
        { title: '费用不包含', name: '2' },
        { title: '儿童价说明', name: '3' },
        { title: '预定须知', name: '4' },
        { title: '预定限制', name: '5' },
        { title: '退改规则', name: '6' },
      ],
     
      traitListOption: [
        '服务保障',
        '贴心赠送',
        '精选酒店',
        '缤纷景点',
        '特色美食',
        '度假首选',
        '超值赠送',
        '精选行程',
        '优质交通'
      ],
      content: '',
      currentDay: "1",
      ra_val: '',
      caluseForm: {
        book_desc: '',
        fee_list: [
          
        ],
        nofee_list: [
          
        ],
        child_notice: [],
        child_limit: [
          {
            limit_type: 1,
            type: 1,
            check: false,
            value: '该产品支持儿童预定'
          },
          {
            limit_type: 2,
            type: 1,
            check: false,
            value: '本产品因服务能力有限，无法接受14天-2周岁（不含）的婴儿出行'
          },
          {
            limit_type: 3,
            type: 1,
            check: false,
            value: '出于安全考虑，18岁以下的未成年人需至少一名成年旅客陪同'
          },
        ],
        age_limit: [
          {
            limit_type: 1,
            type: 2,
            check: false,
            value: '本产品因服务能力有限，仅接受2周岁（含）-79周岁（含）旅客预定'
          },
          {
            limit_type: 2,
            type: 2,
            check: false,
            value: '此产品行程强度较大，请您确保身体健康适宜旅游，如出行人中有75（含）以上的老人，需至少有一位18周岁至70周岁的亲友陪同出行，敬请谅解！'
          },
          {
            limit_type: 3,
            type: 2,
            check: false,
            value: '本产品因服务能力有限，不接受80周岁（含）以上旅客预定，敬请谅解！'
          },
        ],
        people_limit: [
          {
            limit_type: 1,
            type: 3,
            check: false,
            value: '出于安全考虑，本产品不接受孕妇预订，敬请谅解'
          },
          {
            limit_type: 2,
            type: 3,
            check: false,
            value: '此线路因服务能力有限，仅接受持有中国有效身份证件的客人预订(不含中国香港、中国澳门和中国台湾),敬请谅解！'
          },
       
        ],
        refund_rule: '',
        refund_rate: [
          {
            type: 1,
            refund_time: '',
            value: 0,

          },
          {
            type: 2,
            refund_time: '',
            value: 0,

          }
        ]
      },
      // 1，门票,2直通车，3跟团游4私家团5自由行，6，一日游
      virtual: [
        { tit: '直通车', id: 2, tit2: '景区直达' },
        { tit: '一日游', id: 6, tit2: '一日行程' },
        { tit: '跟团游', id: 3, tit2: '省时省心' },
        { tit: '私家团', id: 4, tit2: '私人定制' },
        { tit: '自由行', id: 5, tit2: '自由安排' },
        // { tit: '门票', id: 1, tit2: '景区门票' },
      ],
      extensionStatus: 0,
      deductionStatus: 0,
      previewVisible: false,
      previewKey: '',
      open_svip: false,
      svip_rate: 0,
      extension_one_rate: "",
      extension_two_rate: "",
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      attrVal: {
        price: null,
        cost: null,
        ot_price: null,
        stock: null,
    
      },
      selectRule: '',
      oneFormBatch: [
        {
          attr:"全部",
		      image: "",
          price: "",
          cost: "",
          ot_price: "",
          svip_price: "",
          stock: "",
          cdkey: {},
		      code: "",
          weight: "",
          volume: "",
        },
      ],
      createCount: this.$route.params.id ? 0 : -10,
      ruleList: [],
      attrs: [],
      attrsList:[],
			activeAtter:[],
      attrShow: false,
      generateArr: [],
      addGenerate: false,
      isBtn: false,
      isGenerate: false,
      createProduct: false,
       // 规格数据
      formDynamic: {
        attrsName: '',
        attrsVal: ''
      },
      formDynamics: {
        template_name: '',
        template_value: []
      },
      manyTabTit: {},
      manyTabDate: {},
      flag: 0,
      labelList: [], // 产品标签
      guaranteeList: [], //服务保障
      
      
      categoryList: [], // 平台分类筛选
      props: { emitPath: false },
      propsMer: { emitPath: true },
      
    }
  },
  computed: {
    attrValue() {
      const obj = Object.assign({}, this.attrVal)
      return obj
    },
  },
  

  created() {
    this.tempRoute = Object.assign({}, this.$route)
   

  },
  mounted() {
    this.initData();
    
  },
  destroyed() {
    window.removeEventListener('popstate', this.goBack, false)
  },
  methods: {
      changeMealType(e){
      if(e == 0 && this.baseInfoForm.OneMeal == 0){
         this.baseInfoForm.OneMeal= { // 单套餐
          id: "",
          title: "",
          day_time: 1,
          night: '',
          start_city: '',
          end_city:'',
          start_city_id: '',
          end_city_id:'',
          start_stop_name: '',
          end_stop_name:'',
          start_stop_id: '',
          end_stop_id:'',
          productRoute: '',
          productPriceDate: [],
        }
      }
    },
    deleteMeal(index){
       this.baseInfoForm.ManyMeal.splice(index, 1);
       this.selectMealIndex = 0;
       console.log("this.baseInfoForm.ManyMeal",   this.baseInfoForm.ManyMeal)
    },
    addTcProduct(){
      console.log('baseInfoForm.tc_line_id',this.baseInfoForm.tc_line_id)
      this.fullscreenLoading = true;
      addTongchengProductCode20Api({
        id: this.baseInfoForm.tc_line_id,
        tour_type: this.baseInfoForm.tour_type

      })
        .then(async res => {

        this.product_id = res.data.product_id;
        this.$route.params.id = res.data.product_id;
        this.fullscreenLoading = false;
        this.initData()
          // this.infoData(info);
          // this.productCon()
        })
        .catch(res => {
          console.log('res',res)
          this.fullscreenLoading = false;
          this.$message.error(res.message);
        });
    },

    hp_input(e,n){
      console.log(111,e,n)
    },
    initData(){
      this.getCategoryList()
      this.getLabelLst()
      this.getServiceTerms()
      this.productGetRule()
      this.baseInfoForm.slider_image = []
      // 提示离开页面警告
      this.$store.dispatch('settings/setEdit', true);
      console.log('this.$route.params.id',this.$route.params.id)
      if (this.$route.params.id) {
        this.product_id = this.$route.params.id
        this.setTagsViewTitle()
        this.getInfo()
      }else{

        this.baseInfoForm.OneMeal = {
              id: "",
              title: "",
              day_time: 1,
              night: '',
              start_city: '',
              end_city:'',
              start_city_id: '',
              end_city_id:'',
              start_stop_name: '',
              end_stop_name:'',
              start_stop_id: '',
              end_stop_id:'',
              productRoute: '',
              productPriceDate: [],
        }
        this.productCon()
      }
    },
    // 详情
    getInfo() {
      this.fullscreenLoading = true;
      let parmas = {}
      if(this.$route.query.type == 'copy') parmas.is_copy=1
      productDetailApi(this.product_id, parmas)
        .then(async res => {
  
          let info = res.data;
          this.infoData(info);
          this.productCon()
        })
        .catch(res => {
          console.log('res',res)
          this.fullscreenLoading = false;
          this.$message.error(res.message);
        });
    },
    infoData(info) {
      this.attrs = info.attr || [];
      info.attrValue.forEach(val => {
        this.$set(val,'select', true)
        if(info.type == 3){
          this.$set(val,'library_id', val.library_id==0 ? '' : val.library_id)
        }
      });
      // this.baseInfoForm = {
      //   tour_type: info.tour_type || 0, 
      //   product_type: info.product_type || 0, 
      //   is_show: info.is_show || 0,
      //   image: info.image,
      //   slider_image: info.slider_image,
      //   store_name: info.store_name,
      //   store_info: info.store_info,
      //   cate_id: info.cate_id, // 平台分类id
      //   mer_cate_id: info.mer_cate_id || [], // 商户分类id
      //   mer_labels:
      //     info.mer_labels && info.mer_labels.length
      //       ? info.mer_labels.map(Number)
      //       : [],
      //   content: info.content,
      //   type: info.type || 4,
        
      //   limit_deadline:info.limit_deadline,
      //   deadline_day: info.deadline_day,
      //   deadline_hour: info.deadline_hour,
      //   refund_switch: info.refund_switch,
      //   is_confirm_order: info.is_confirm_order,
      //   guarantee_ids: info.guarantee_ids ? info.guarantee_ids.split(",").map(Number) : [],
      //   price: info.price || 0,
      //   stock:  info.stock || 0,
      //   source: info.source || 0,
      //   tc_line_id: info.tc_line_id || '',
      //   once_max_count: info.once_max_count || 0,
      //   once_min_count: info.once_min_count || 0,
      //   use_address: info.use_address || '',
      //   check_type: info.check_type || 2,
      //   check_time: info.check_time || 0,
      //   duration: info.duration || 0,

      //   meal_type: info.meal_type || 0,
      //   OneMeal: info.OneMeal,
      //   ManyMeal: info.ManyMeal
      // };

    let keys = Object.keys(this.baseInfoForm);
      keys.forEach((key) => {
        if (info[key] !== undefined) {
          this.baseInfoForm[key] = info[key];
        }
      });

     this.baseInfoForm.id = info.product_id;
     this.baseInfoForm.is_copy = info.is_copy;
     this.baseInfoForm.guarantee_ids = info.guarantee_ids ? info.guarantee_ids.split(",").map(Number) : [];

     if((this.baseInfoForm.meal_type == 0||!this.baseInfoForm.meal_type) &&  !this.baseInfoForm.OneMeal){
        this.baseInfoForm.OneMeal= { // 单套餐
          id: "",
          title: "",
          day_time: 1,
          night: '',
          start_city: '',
          end_city:'',
          start_city_id: '',
          end_city_id:'',
          start_stop_name: '',
          end_stop_name:'',
          start_stop_id: '',
          end_stop_id:'',
          productRoute: '',
          productPriceDate: [],
        }
     }

      this.content = info.content;
      var traitList = info.traits? JSON.parse(info.traits): []; 
      if(traitList[0]){
        this.detailForm.traitArr1 = traitList[0]
      }
      if(traitList[1]){
        this.detailForm.traitArr2 = traitList[1]
      }
      if(traitList[2]){
        this.detailForm.traitArr3 = traitList[2]
      }

      // 费用须知数据
      this.baseInfoForm.fee_list = [];
      this.baseInfoForm.nofee_list = [];
      this.baseInfoForm.child_notice = [];
      if(info.productFee.length){
        info.productFee.forEach( a => {
          if( a.type == 1){
            this.baseInfoForm.fee_list.push(a)
          }
          if( a.type == 2){
            this.baseInfoForm.nofee_list.push(a)
          }
          if( a.type == 3){
            this.baseInfoForm.child_notice.push(a)
          }
        })
        
      }

      console.log(' this.baseInfoForm', this.baseInfoForm)

       // 预定限制数据
      if(info.productLimit.length){
        info.productLimit.forEach( a => {
          this.baseInfoForm.child_limit.forEach( b => {
            if(a.type== b.type && a.limit_type == b.limit_type){
              b.check = true;
            }
          })
        })
        info.productLimit.forEach( a => {
          this.baseInfoForm.age_limit.forEach( b => {
            if(a.type== b.type && a.limit_type == b.limit_type){
              b.check = true;
            }
          })
        })
        info.productLimit.forEach( a => {
          this.baseInfoForm.people_limit.forEach( b => {
            if(a.type== b.type && a.limit_type == b.limit_type){
              b.check = true;
            }
          })
        })
      }
       this.baseInfoForm.refund_rule = info.productRefundRule?  info.productRefundRule.content: ''
      this.baseInfoForm.book_desc = info.productBookDesc?  info.productBookDesc.content: ''
      if(info.productRefundRate.length){
        this.baseInfoForm.refund_rate = info.productRefundRate;
      }
       console.log("baseInfoForm",this.baseInfoForm)

     
      if (info.svip_price_type != 0 && info.mer_svip_status){
        this.attrVal = {
          price: null,
          cost: null,
          ot_price: null,
          svip_price: null,
          stock: null,
        };
      }

      if (this.skuForm.spec_type === 0) {
        if(info.attrValue.length){
          info.attrValue[0].list = []
          this.OneattrValue = info.attrValue;    
        }
        
        
      } else {
        this.ManyAttrValue = info.attrValue;

        this.generate();
      
      }
      this.getAttr();
       this.success = true 
      this.fullscreenLoading = false;



    },
 
    // 平台分类；
    getCategoryList() {
      categoryListApi()
        .then(res => {
          this.categoryList = res.data
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    /** 获取服务条款 */
    getServiceTerms() {
      guaranteeSelectApi().then((res) => {
        this.guaranteeList = res.data;
      })
      .catch(({ message }) => {
        this.$message.error(message)
      })
    },
      // 获取标签项
    getLabelLst() {
      getProductLabelApi()
        .then(res => {
          this.labelList = res.data
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },


    changeOneMealValue(e){
      this.baseInfoForm.OneMeal.productRoute = e.route;
    },
    changeManyMealValue(e){
        this.baseInfoForm.ManyMeal[e.meal_index].productRoute = e.route;
    },
    changeOneMealPriceDate(e){
      this.baseInfoForm.OneMeal.productPriceDate = e.finalDataList;
    },
    changeManyMealPriceDate(e){
        this.baseInfoForm.ManyMeal[e.meal_index].productPriceDate = e.finalDataList;
    },
    watCh(val) {
      const tmp = {}
      const tmpTab = {}
      this.skuForm.attr.forEach((o, i) => {
        tmp['value' + i] = { title: o.value }
        tmpTab['value' + i] = ''
      })
      if(this.isGenerate || this.createCount == 1){
        this.ManyAttrValue = this.attrFormat(val)
        this.manyTabTit = tmp
        this.manyTabDate = tmpTab
        this.formThead = Object.assign({}, this.formThead, tmp)
      }
      this.isGenerate = false
      this.addGenerate = false
    },
    attrFormat(arr) {
      let data = [],that = this;
      let res = []
      return format(arr)
      function format(arr) {
        if (arr.length > 1) {
          arr.forEach((v, i) => {
            if (i === 0) data = arr[i]['detail']
            const tmp = []
            data.forEach(function(vv) {
              arr[i + 1] &&
                arr[i + 1]['detail'] &&
                arr[i + 1]['detail'].forEach(g => {
                  const rep2 =
                    (i !== 0 ? '' : arr[i]['value'] + '_$_') +
                    vv +
                    '-$-' +
                    arr[i + 1]['value'] +
                    '_$_' +
                    g
                  tmp.push(rep2)
                  if (i === arr.length - 2) {
                    const rep4 = {
                      image: '',
                      price: 0,
                      cost: 0,
                      ot_price: 0,
                      select: true,
                      sku: "",
                      stock: 0,
                      cdkey: {},
                      cdkeyLibrary: {},
                      library_name: "",
                      library_id: "",
                      bar_code: '',
                      weight: 0,
                      volume: 0,
                      extension_one: 0,
                      extension_two: 0,
                    }
                    rep2.split('-$-').forEach((h, k) => {
                      const rep3 = h.split('_$_')
                      if (!rep4['detail']) rep4['detail'] = {}
                      rep4['detail'][rep3[0]] = rep3.length > 1 ? rep3[1] : ''
                    })
                    // if(rep4.detail !== 'undefined' && rep4.detail !== null){
                    Object.values(rep4.detail).forEach((v, i) => {
                      rep4['value' + i] = v
                    })
                    // }
                    res.push(rep4)
                  }
                })
            })
            data = tmp.length ? tmp : []
          })
        } else {
          const dataArr = []
          arr.forEach((v, k) => {
            v['detail'].forEach((vv, kk) => {
              dataArr[kk] = v['value'] + '_' + vv
              res[kk] = {
                image: '',
                price: 0,
                cost: 0,
                ot_price: 0,
                select: true,
                sku: "",
                stock: 0,
                cdkey: {},
                cdkeyLibrary: {},
                library_name: "",
                library_id: "",
                bar_code: '',
                weight: 0,
                volume: 0,
                extension_one: 0,
                extension_two: 0,
                detail: { [v['value']]: vv },
              }
              Object.values(res[kk].detail).forEach((v, i) => {
                res[kk]['value' + i] = v
              })
            })
          })
          data.push(dataArr.join('$&'))   
        }
        if(that.generateArr.length>0){
          that.generateArr.forEach((v, i) => {
            res[i]['image'] = v.image || v.pic
            res[i]['price'] = v.price
            res[i]['cost'] = v.cost
            res[i]['ot_price'] = v.ot_price
            res[i]['sku'] = v.sku
            res[i]['stock'] = v.stock
            res[i]['unique'] = v.unique
            res[i]['bar_code'] = v.bar_code
            res[i]['volume'] = v.volume
            res[i]['weight'] = v.weight
            res[i]['extension_one'] = v.extension_one
            res[i]['extension_two'] = v.extension_two
            res[i]['cdkey'] = v.cdkey&&v.cdkey.length&&v.cdkey[0] || null
            res[i]['cdkeyLibrary'] = v.cdkeyLibrary || {}
            res[i]['library_name'] = v.cdkeyLibrary && v.cdkeyLibrary.name
            res[i]['library_id'] = v.library_id || ""
            res[i]['svip_price'] = v.svip_price || ""
          })
        }
        return res
      }
    },
    onChangetype(item) {
      if (item === 1) {
        this.OneattrValue.map(item => {
          this.$set(item, 'extension_one', null)
          this.$set(item, 'extension_two', null)
        })
        this.ManyAttrValue.map(item => {
          this.$set(item, 'extension_one', null)
          this.$set(item, 'extension_two', null)
        })
      } else {
        this.OneattrValue.map(item => {
          delete item.extension_one
          delete item.extension_two
          this.$set(item, 'extension_one', null)
          this.$set(item, 'extension_two', null)
        })
        this.ManyAttrValue.map(item => {
          delete item.extension_one
          delete item.extension_two
        })
      }
    },
    

// 类型 1.集合 2.结束行程 3.餐饮 4.酒店5.航班6.景点7.自费8.自由活动9.交通10.其他
    filterType(e){
      switch (e) {
          case 1:           
              return "集合";
          case 2:
              return "结束行程";
          case 3:           
              return "餐饮";
          case 4:
              return "酒店";
          case 5:
              return "航班";
          case 6:
              return "景点";
          case 7:
              return "自费";    
          case 8:
              return "自由活动";   
          case 9:
              return "交通";    
          case 10:
              return "其他";         
      }
    },
   

    
    setTagsViewTitle() {
      const title = '编辑产品'
      const route = Object.assign({}, this.tempRoute, {
        title: `${title}-${this.$route.params.id}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },

    selectType(e){
      if(this.routeForm.productRouteDay[e.day -1].productRouteDetail.length >=16){
        return this.$message.error("最多添加15个时间节点")
      }
      this.routeForm.productRouteDay[e.day -1].productRouteDetail.push({
          type: e.type,
          happen_time: '',
          content: '',
          take_time_hour: '',
          take_time_min: '',
          dinner: '',
          hotel: '',
          scenic_ids: '',
          scenic_names: '',
          address: '',
          airplan: '',
          scenicList: [],
        })

    },
    selectMealHanele(index){
      console.log('selectMealHanele')
      setTimeout(() => {
          this.selectMealIndex = index;
          this.flag++;
      }, 100);
    },
    editMeal(item,index){
      console.log(item,index)
      this.tempMeal = item;
      this.tempMeal.index = index;
      this.mealShowVisible = true;
    },
    addmealShow(){
      this.mealShowVisible = true;
      this.tempMeal = {
        id: '',
        title: "",
        day_time: 1,
        night: '',
        start_city: '',
        end_city:'',
        start_city_id: '',
        end_city_id:'',
        start_stop_name: '',
        end_stop_name:'',
        start_stop_id: '',
        end_stop_id:'',
        productRoute: '',
        productPriceDate: [],
        index: ''
      }
    },
    handleAddMeal(){
      if(!this.tempMeal.title){
        return this.$message.error("套餐标题不能为空")
      }
      if(this.baseInfoForm.tour_type !=1){
        if(!this.tempMeal.day_time){
          return this.$message.error("套餐行程天数不能为空")
        }
        if(!this.tempMeal.start_city){
          return this.$message.error("套餐行程出发城市不能为空")
        }
        if(!this.tempMeal.end_city){
          return this.$message.error("套餐行程到达城市不能为空")
        }
        if(!this.tempMeal.start_stop_name){
          return this.$message.error("套餐行程出发站点不能为空")
        }
        if(!this.tempMeal.end_stop_name){
          return this.$message.error("套餐行程到达站点不能为空")
        }
      }
      this.baseInfoForm.ManyMeal.push(this.tempMeal);
      console.log("this.baseInfoForm.ManyMeal",this.baseInfoForm.ManyMeal)
      this.mealShowVisible = false;
      this.tempMeal = {
        id: '',
        title: "",
        day_time: 1,
        night: '',
        start_city: '',
        end_city:'',
        start_city_id: '',
        end_city_id:'',
        start_stop_name: '',
        end_stop_name:'',
        start_stop_id: '',
        end_stop_id:'',
        productRoute: '',
        productPriceDate: [],
        index: ''
      }

    },
    handleEditMeal(){
      if(this.tempMeal.index === ''){
        return this.$message.error("编辑失败，缺失套餐索引")
      }
      if(!this.tempMeal.title){
        return this.$message.error("套餐标题不能为空")
      }
      if(this.baseInfoForm.tour_type !=1){
        if(!this.tempMeal.day_time){
          return this.$message.error("套餐行程天数不能为空")
        }
        if(!this.tempMeal.start_city){
          return this.$message.error("套餐行程出发城市不能为空")
        }
        if(!this.tempMeal.end_city){
          return this.$message.error("套餐行程到达城市不能为空")
        }
        if(!this.tempMeal.start_stop_name){
          return this.$message.error("套餐行程到出发站点不能为空")
        }
        if(!this.tempMeal.end_stop_name){
          return this.$message.error("套餐行程到到达站点不能为空")
        }
      }
      console.log("this.tempMeal.index",this.tempMeal.index)
      this.baseInfoForm.ManyMeal[this.tempMeal.index] = this.tempMeal;

      this.mealShowVisible = false;
      this.tempMeal = {
        id: '',
        title: "",
        day_time: 1,
        night: '',
        start_city: '',
        end_city:'',
        start_city_id: '',
        end_city_id:'',
        start_stop_name: '',
        end_stop_name:'',
        start_stop_id: '',
        end_stop_id:'',
        productRoute: '',
        productPriceDate: [],
        index: ''
      }

    },
    addScenic(item){
      item.push({
        value: ''
      })
    },
    deleteScenic(item){
      item.push({
        value: ''
      })
    },
    checkAge(rule, value, callback) {
        if (value.length <= 0) {
          return callback(new Error('请添加景区'));
        }
      },
    getEditorContent(data) {
     this.content = data;
    },
    getCaluseBookDescContent(data){
      this.caluseForm.book_desc = data;
    },
    getRefundRule(data) {
      this.caluseForm.refund_rule = data;
    },
    handleSelectOneMealStart(e){
      console.log(123,e)
       console.log(123,  this.baseInfoForm.OneMeal)
     this.baseInfoForm.OneMeal.start_city_id = e.id;
     this.baseInfoForm.OneMeal.start_city = e.name;
    },
    handleSelectOneMealEnd(e){
      this.baseInfoForm.OneMeal.end_city_id = e.id;
      this.baseInfoForm.OneMeal.end_city = e.name;
     },
     handleSelectOneMealStartStop(e){
     this.baseInfoForm.OneMeal.start_stop_id = e.id;
     this.baseInfoForm.OneMeal.start_stop_name = e.name;
    },
    handleSelectOneMealEndStop(e){
      this.baseInfoForm.OneMeal.end_stop_id = e.id;
      this.baseInfoForm.OneMeal.end_stop_name = e.name;
    },
    handleSelectTempMealStart(e){
     this.tempMeal.start_city_id = e.id;
     this.tempMeal.start_city = e.name;
    },
    handleSelectTempMealEnd(e){
      this.tempMeal.end_city_id = e.id;
      this.tempMeal.end_city = e.name;
     },
     handleSelectTempMealStartStop(e){
     this.tempMeal.start_stop_id = e.id;
     this.tempMeal.start_stop_name = e.name;
    },
    handleSelectTempMealEndStop(e){
      this.tempMeal.end_stop_id = e.id;
      this.tempMeal.end_stop_name = e.name;
    },
    // 搜索
    querySearch(query, callback) {
      getCityListApi({ name: query ,type: 1})
        .then(res => {
          callback(res.data)
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },

    querySearchOneMealStartStop(query, callback) {
      if(!this.baseInfoForm.OneMeal.start_city_id){
        return this.$message.error('请先选择出发城市')
      }
      getCityListApi({ name: query, pid: this.baseInfoForm.OneMeal.start_city_id ,business_type: 2})
        .then(res => {
          callback(res.data)
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    querySearchOneMealEndStop(query, callback) {
      if(!this.baseInfoForm.OneMeal.end_city_id){
        return this.$message.error('请先选择目的城市')
      }
      getCityListApi({ name: query, pid: this.baseInfoForm.OneMeal.end_city_id ,business_type: 2})
        .then(res => {
          callback(res.data)
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },

     querySearchTempMealStartStop(query, callback) {
      if(!this.tempMeal.start_city_id){
        return this.$message.error('请先选择出发城市')
      }
      getCityListApi({ name: query, pid: this.tempMeal.start_city_id ,business_type: 2})
        .then(res => {
          callback(res.data)
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    querySearchTempMealEndStop(query, callback) {
      if(!this.tempMeal.end_city_id){
        return this.$message.error('请先选择目的城市')
      }
      getCityListApi({ name: query, pid: this.tempMeal.end_city_id ,business_type: 2})
        .then(res => {
          callback(res.data)
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },

     // 配置
     productCon() {
      productConfigApi()
        .then(res => {
          this.extensionStatus = res.data.extension_status
          this.deductionStatus = res.data.integral_status
          this.open_svip =
            res.data.mer_svip_status == 1 && res.data.svip_switch_status == 1
          this.svip_rate = res.data.svip_store_rate
          this.extension_one_rate = res.data.extension_one_rate
          this.extension_two_rate = res.data.extension_two_rate        
        })
        .catch(res => {
          this.$message.error(res.message)
        })
    },

  

     // 添加规则；
    addRule() {
      const _this = this
      this.$modalAttr(this.formDynamics, function() {
        console.log(213)
        _this.productGetRule()
      })
    },
    // 选择规格
    onChangeProductSpec(num) {
      console.log('num',num)
      // if (num === 1) this.productGetRule()
      if (num === 1) this.addTicketSku()
    },

    addTicketSku() {
      var that= this;
      var template_value = [
        {
            "value": "场次",
            "detail": [
            ]
        }
      ]
      this.skuForm.attr = template_value
      this.attrs = template_value
      console.log('this.ManyAttrValue',this.ManyAttrValue)
      this.addmanyData(this.ManyAttrValue)
      this.getAttr();

      setTimeout(() => {
        that.generate()
      },300)
    },
      // 获取产品属性模板；
    productGetRule() {
      templateLsitApi().then(res => {
        this.ruleList = res.data
      })
    },


    virtualbtn(id) {
      if (this.$route.params.id) {
        return this.$message.warning('产品类型不能切换!');
      }
      if(id == 6){
        this.baseInfoForm.day_time = 1;
      } else {
        this.baseInfoForm.day_time = '';
      }
      this.baseInfoForm.tour_type = id;
      this.productCon();
    },

    // 乘法
    accMul(arg1, arg2) {
      var max = 0
      var s1 = arg1.toString()
      var s2 = arg2.toString()
      try {
        max += s1.split('.')[1].length
      } catch (e) {}
      try {
        max += s2.split('.')[1].length
      } catch (e) {}
      return (
        (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) /
        Math.pow(10, max)
      )
    },
    // 删除表格中的属性
    delAttrTable(index) {
      this.ManyAttrValue.splice(index, 1)
    },
    // 批量添加
    batchAdd() {
      for (const val of this.ManyAttrValue) {
        if(val.select){
          if(this.oneFormBatch[0].attr!= '')this.$set(val, 'attr', this.oneFormBatch[0].attr)
          if(this.oneFormBatch[0].image!= '')this.$set(val, 'image', this.oneFormBatch[0].image)
          if(this.oneFormBatch[0].price!= null && this.oneFormBatch[0].price!= '')this.$set(val, 'price',  this.oneFormBatch[0].price)
          if(this.oneFormBatch[0].cost!= null && this.oneFormBatch[0].cost!= '')this.$set(val, 'cost', this.oneFormBatch[0].cost)
          if(this.oneFormBatch[0].ot_price!= null && this.oneFormBatch[0].ot_price!= '')this.$set(val, 'ot_price', this.oneFormBatch[0].ot_price)
          if(this.oneFormBatch[0].svip_price!= null && this.oneFormBatch[0].svip_price!= '')this.$set(val, 'svip_price', this.oneFormBatch[0].svip_price)
          if(this.oneFormBatch[0].stock!= null && this.oneFormBatch[0].stock!= '')this.$set(val, 'stock', this.oneFormBatch[0].stock)
          if(this.oneFormBatch[0].bar_code!= null && this.oneFormBatch[0].bar_code!= '')this.$set(val, 'bar_code', this.oneFormBatch[0].bar_code)
          if(this.oneFormBatch[0].weight!= null && this.oneFormBatch[0].weight!= '')this.$set(val, 'weight', this.oneFormBatch[0].weight)
          if(this.oneFormBatch[0].volume!= null && this.oneFormBatch[0].volume!= '')this.$set(val, 'volume', this.oneFormBatch[0].volume)
          if(this.oneFormBatch[0].extension_one!= null && this.oneFormBatch[0].extension_one!= '')this.$set(val, 'extension_one', this.oneFormBatch[0].extension_one)
          if(this.oneFormBatch[0].extension_two!= null && this.oneFormBatch[0].extension_two!= '')this.$set(val, 'extension_two', this.oneFormBatch[0].extension_two)
          if(this.skuForm.type == 2){
            val.cdkey = {}
            if(this.oneFormBatch[0]['cdkey'].is_type == 1){
              if(this.oneFormBatch[0]['cdkey'].list && this.oneFormBatch[0]['cdkey'].list.length){
                this.$set(val.cdkey, "list", this.oneFormBatch[0]['cdkey'].list);
                this.$set(val, "stock", this.oneFormBatch[0]['cdkey'].list.length);
              }
            }else if(this.oneFormBatch[0]['cdkey'].key){
              this.$set(val.cdkey, "key", this.oneFormBatch[0]['cdkey'].key);
            }
            this.$set(val.cdkey, "is_type",this.oneFormBatch[0]['cdkey'].is_type); 
			    }
        }
      }
    },
    // 添加按钮
    addBtn() {
      this.clearAttr()
      this.isBtn = true
      this.addGenerate = true
    },
    // 取消
    offAttrName() {
      this.isBtn = false
    },
    clearAttr() {
      this.formDynamic.attrsName = ''
      this.formDynamic.attrsVal = ''
    },
    // 删除规格
    handleRemoveAttr(index) {
      this.skuForm.attr.splice(index, 1)
      this.ManyAttrValue.splice(index, 1)
    },
    // 删除属性
    handleClose(item, index) {
      item.splice(index, 1)
      this.attrs = this.skuForm.attr;
    },
    // 添加规则名称
    createAttrName() {
      if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
        const data = {
          value: this.formDynamic.attrsName,
          detail: [this.formDynamic.attrsVal]
        }
        this.skuForm.attr.push(data)
        var hash = {}
        this.skuForm.attr = this.skuForm.attr.reduce(function(
          item,
          next
        ) {
          /* eslint-disable */
          hash[next.value] ? "" : (hash[next.value] = true && item.push(next));
          return item;
        },
        []);
        this.clearAttr();
        this.attrs = this.skuForm.attr;
        this.isGenerate = true;
        this.isBtn = false;
      } else {
        this.$message.warning("请添加完整的规格！");
      }
    },
    // 添加属性
    createAttr(num, idx) {
      if (num) {
        this.skuForm.attr[idx].detail.push(num);
        var hash = {};
        this.skuForm.attr[idx].detail = this.skuForm.attr[
          idx
        ].detail.reduce(function(item, next) {
          /* eslint-disable */
          hash[next] ? "" : (hash[next] = true && item.push(next));
          return item;
        }, []);
        this.skuForm.attr[idx].inputVisible = false;
      } else {
        this.$message.warning("请添加属性");
      }
      this.attrs = this.skuForm.attr;
    },
     // 立即生成
    generate() {
      let id = this.$route.params.id || 0;
      let parmas = {
        attrs: this.skuForm.attr,
        product_type: this.baseInfoForm.product_type
      }
      generateAttrApi(id,parmas)
        .then((res) => {
          let info = res.data
          this.generateArr =  res.data.value
          this.skuForm.attr = res.data.attr;
          this.createProduct = true
          this.isGenerate = true
          if (this.$route.params.id !== "0") {
			      this.addmanyData(info.value);
          }
          if (!this.$route.params.id && this.skuForm.spec_type === 1) { 
            this.ManyAttrValue.map((item) => {
              item.image = (item.image||item.pic) || this.baseInfoForm.slider_image[0];
              this.$set(item,'cdkeyLibrary', {})
        
              // this.$set(item, 'select', true)
            });
          }
					this.getAttr();
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
   
    
	
 
     // 选择属性确认
    confirm() {
      if (!this.selectRule) {
        return this.$message.warning('请选择属性')
      } 
      this.ruleList.forEach(item => {
        if (item.attr_template_id === this.selectRule) {
          this.skuForm.attr = item.template_value
          this.attrs = item.template_value
        }
      })
      console.log('this.ManyAttrValue',this.ManyAttrValue)
      this.addmanyData(this.ManyAttrValue)
      this.getAttr();
    },
    addmanyData(data){
      data.forEach(item=>{
        item.select = true
      })
      this.ManyAttrValue = data;
    },
    //打开属性
	  batchAttr(){
		  this.attrShow = true;
	  },
    //选中属性
	  activeAttr(e){
		  this.attrsList = e;
	  },
	  //关闭属性弹窗
	  labelAttr(){
	  	this.attrShow = false;
	  },
    //获取属性
		getAttr(){
     
			this.oneFormBatch[0].attr = '全部';
			let data = this.attrs;
			data.map(el=>{
				el.details = [];
				el.detail.map(label=>{
					el.details.push({
						name:label,
						select:false
					})
				})
			})
			this.attrsList = data;
      this.generateArr.forEach((item,index)=>{
        item.sku = this.ManyAttrValue[index]['sku']
      }) 
		},
    //提交属性值；
	  subAttrs(e){
			let selectData = [];
			this.attrsList.forEach((el,index)=>{
				let obj = [];
				el.details.forEach((label)=>{
					if(label.select){
						obj.push(label.name);
					}
				})
				if(obj.length){
					selectData.push(obj)
				}
			})
		  let newData = [];
		  if(selectData.length){
			  newData = this.doCombination(selectData);
		  }
		  this.attrShow = false;
		  this.activeAtter = selectData;
		  this.oneFormBatch[0].attr = newData.length?newData.join(';') : '全部';
      let manyAttr = this.ManyAttrValue
		  manyAttr.forEach(j=> {
        this.$set(j,'select',false)
			  if(newData.length){
				 newData.forEach(item=> {
            if(j.sku && j.sku.split('').length == item.split('').length){
              if(j.sku == item){
                this.$set(j,'select',true)
              }
            }else{
              if(j.sku && j.sku == item){
                this.$set(j,'select',true)
              }
            }
          })
			  }else{
          this.$set(j,'select',true)
			  }
		  })
      this.$nextTick(function(){
        this.$set(this,'ManyAttrValue',manyAttr)
      })
	  },
    showInput(item) {
      this.$set(item, 'inputVisible', true)
    },
    goBack() {
      sessionStorage.clear()
      window.history.back()
    },
    
   
    handleRemove(i) {
      this.baseInfoForm.slider_image.splice(i, 1);
    },
    // 点击产品图
    modalPicTap(tit, num, i) {
      const _this = this;
      const attr = [];
      this.$modalUpload(function(img) {
        if (tit === "1" && !num) {
          _this.baseInfoForm.image = img[0];
          _this.OneattrValue[0].image = img[0];
        }
        if (tit === "2" && !num) {
          img.map(item => {
            attr.push(item.attachment_src);
            _this.baseInfoForm.slider_image.push(item);
            if (_this.baseInfoForm.slider_image.length > 10) {
              _this.baseInfoForm.slider_image.length = 10;
            }
          });
        }
        if (tit === "1" && num === "dan") {
          _this.OneattrValue[0].image = img[0];
        }
        if (tit === "1" && num === "duo") {
          _this.ManyAttrValue[i].image = img[0];
        }
        if (tit === "1" && num === "pi") {
          _this.oneFormBatch[0].image = img[0];
        }
   
      }, tit);
    },
    handleSubmitUp() {
      this.currentTab = (Number(this.currentTab) - 1).toString();
    },
    handleSubmitNest(name) {
      this.$refs[name].validate(valid => {
         console.log(111,valid)
        if (valid) {
          this.currentTab = (Number(this.currentTab) + 1).toString();
        }
      });
    },
     summarizeData1() {
      let baseSetData = this.$refs.productBaseSet.formValidate;
      let marketingSetData = this.$refs.marketingSet.formValidate;
      let otherSetData = this.$refs.otherSet.formValidate;
      let caluseForm = this.$refs.caluseSet.caluseForm;
      let cardFaceSet = this.$refs.cardFaceSet.getFormData();
      let formData = { ...baseSetData, ...marketingSetData, ...otherSetData, ...cardFaceSet,...caluseForm };
      if (this.$route.query.copy) {
        this.$set(formData, 'id', 0);
      }
      this.$set(formData, "routeForm", this.$refs.routeCard.routeForm);



      this.$set(formData, "tour_type", this.formData.tour_type);
      this.$set(formData, "day_time", this.formData.day_time);
      this.$set(formData, "start_city", this.formData.start_city);
      this.$set(formData, "end_city", this.formData.end_city);
      this.$set(formData, "start_city_id", this.formData.start_city_id);
      this.$set(formData, "end_city_id", this.formData.end_city_id);
      this.$set(formData, "start_stop_name", this.formData.start_stop_name); 
      this.$set(formData, "end_stop_name", this.formData.end_stop_name); 
      this.$set(formData, "start_stop_id", this.formData.start_stop_id); 
      this.$set(formData, "end_stop_id", this.formData.end_stop_id); 
      this.$set(formData, "limit_deadline", this.formData.limit_deadline); 
      this.$set(formData, "deadline_day", this.formData.deadline_day); 
      this.$set(formData, "deadline_hour", this.formData.deadline_hour); 
      this.$set(formData, "is_confirm_order", this.formData.is_confirm_order);
      this.$set(formData, "is_auth_buy", this.formData.is_auth_buy);
      this.$set(formData, "tc_line_id", this.formData.tc_line_id);
      this.$set(formData, "use_address", this.formData.use_address);
      this.$set(formData, "check_type", this.formData.check_type);
      this.$set(formData, "check_time", this.formData.check_time);
      this.$set(formData, "duration", this.formData.duration);

      this.$set(formData, "slider_image", this.formData.slider_image);
      this.$set(formData, "type", this.type);
      this.$set(formData, "product_type", this.formData.product_type);
      this.$set(formData, 'spec_type', this.formData.spec_type);
      this.$set(formData, 'items', this.attrs);
      this.$set(formData, 'attr', this.formData.attr);
      this.$set(formData, 'attrs', this.manyFormValidate.slice(1));
      this.$set(formData, 'description', this.formData.description);
      this.$set(formData, 'delivery_type', this.formData.delivery_type);
      this.$set(formData, 'freight', this.formData.freight);
      this.$set(formData, 'postage', this.formData.postage);
      this.$set(formData, 'temp_id', this.formData.temp_id);
      this.$set(formData, 'applicable_type', this.formData.applicable_type);
	  this.$set(formData, 'reservation_time_type', this.formData.reservation_time_type);
	  this.$set(formData, 'reservation_times', this.formData.reservation_times);
	  this.$set(formData, 'reservation_time_interval', this.formData.reservation_time_interval);
	  this.$set(formData, 'customize_time_period', this.formData.customize_time_period);
	  this.$set(formData, 'reservation_type', this.formData.reservation_type);
	  this.$set(formData, 'reservation_timing_type', this.formData.reservation_timing_type);
	  this.$set(formData, 'is_show_stock', this.formData.is_show_stock);
	  this.$set(formData, 'sale_time_type', this.formData.sale_time_type);
	  this.$set(formData, 'sale_time_week', this.formData.sale_time_week);
	  this.$set(formData, 'sale_time_data', this.formData.sale_time_data);
	  this.$set(formData, 'show_reservation_days_type', this.formData.show_reservation_days_type);
	  this.$set(formData, 'show_reservation_days', this.formData.show_reservation_days);
	  this.$set(formData, 'is_advance', this.formData.is_advance);
	  this.$set(formData, 'advance_time', this.formData.advance_time);
	  this.$set(formData, 'is_cancel_reservation', this.formData.is_cancel_reservation);
	  this.$set(formData, 'cancel_reservation_time', this.formData.cancel_reservation_time);	  
	  this.$set(formData, 'related', this.cardData);
      this.$set(
        formData,
        'label_id',
        marketingSetData.label_id.map((item) => item.id)
      );
      this.$set(
        formData,
        'store_label_id',
        baseSetData.store_label_id.map((item) => item.id)
      );
      this.$set(
        formData,
        'recommend_list',
        marketingSetData.recommend_list.map((item) => item.product_id)
      );
      this.$set(formData, 'is_sync_show', this.formData.is_sync_show);
      this.$set(formData, 'is_sync_stock', this.formData.is_sync_stock);
      return formData;
    },
     summarizeData() {
      // let baseSetData = this.$refs.productBaseSet.formValidate;
      // let marketingSetData = this.$refs.marketingSet.formValidate;
      // let otherSetData = this.$refs.otherSet.formValidate;
      // let caluseForm = this.$refs.caluseSet.caluseForm;
      // let cardFaceSet = this.$refs.cardFaceSet.getFormData();
      // let formData = { ...baseSetData, ...marketingSetData, ...otherSetData, ...cardFaceSet,...caluseForm };
      let caluseForm = this.$refs.caluseSet.caluseForm;
      let formData = { ...caluseForm ,...this.detailForm};

      if(this.baseInfoForm.id){
         this.$set(formData, "id", this.baseInfoForm.id);
      }
      this.$set(formData, "type", this.baseInfoForm.type);
      this.$set(formData, "tour_type", this.baseInfoForm.tour_type);
      this.$set(formData, "limit_deadline", this.baseInfoForm.limit_deadline); 
      this.$set(formData, "deadline_day", this.baseInfoForm.deadline_day); 
      this.$set(formData, "deadline_hour", this.baseInfoForm.deadline_hour); 
      this.$set(formData, "is_confirm_order", this.baseInfoForm.is_confirm_order);
      this.$set(formData, "is_auth_buy", this.baseInfoForm.is_auth_buy);
      this.$set(formData, "tc_line_id", this.baseInfoForm.tc_line_id);
      this.$set(formData, "use_address", this.baseInfoForm.use_address);
      this.$set(formData, "check_type", this.baseInfoForm.check_type);
      this.$set(formData, "check_time", this.baseInfoForm.check_time);
      this.$set(formData, "duration", this.baseInfoForm.duration);
      this.$set(formData, "price", this.baseInfoForm.price);
        this.$set(formData, "stock", this.baseInfoForm.stock);
      this.$set(formData, "guarantee_ids", this.baseInfoForm.guarantee_ids);

      this.$set(formData, "image", this.baseInfoForm.image);
      this.$set(formData, "slider_image", this.baseInfoForm.slider_image);
      this.$set(formData, "product_type", this.baseInfoForm.product_type);
      this.$set(formData, 'spec_type', this.baseInfoForm.spec_type);
      this.$set(formData, 'store_name', this.baseInfoForm.store_name);
      this.$set(formData, 'store_info', this.baseInfoForm.store_info);
      this.$set(formData, 'keyword', this.baseInfoForm.keyword);
      this.$set(formData, 'brand_id', this.baseInfoForm.brand_id);
      this.$set(formData, 'cate_id', this.baseInfoForm.cate_id);
      this.$set(formData, 'param_temp_id', this.baseInfoForm.param_temp_id);
      this.$set(formData, 'unit_name', this.baseInfoForm.unit_name);
      this.$set(formData, 'sort', this.baseInfoForm.sort);
      this.$set(formData, 'is_good', this.baseInfoForm.is_good);
      this.$set(formData, 'temp_id', this.baseInfoForm.temp_id);
      this.$set(formData, 'video_link', this.baseInfoForm.video_link);
      this.$set(formData, 'guarantee_template_id', this.baseInfoForm.guarantee_template_id);
      this.$set(formData, 'delivery_way', this.baseInfoForm.delivery_way);
      this.$set(formData, 'delivery_free', this.baseInfoForm.delivery_free);
      this.$set(formData, 'pay_limit', this.baseInfoForm.pay_limit);
      this.$set(formData, 'once_min_count', this.baseInfoForm.once_min_count);
      this.$set(formData, 'svip_price_type', this.baseInfoForm.svip_price_type);
      this.$set(formData, 'refund_switch', this.baseInfoForm.refund_switch);
      this.$set(formData, 'params', this.baseInfoForm.params);
      this.$set(formData, 'extension_type', this.baseInfoForm.extension_type);
      this.$set(formData, 'integral_rate', this.baseInfoForm.integral_rate);
      this.$set(formData, 'content', this.content);
      this.$set(formData, 'give_coupon_ids', this.baseInfoForm.give_coupon_ids);
      this.$set(formData, 'is_gift_bag', this.baseInfoForm.is_gift_bag);
      this.$set(formData, 'couponData', this.baseInfoForm.couponData);
      this.$set(formData, 'extend', this.baseInfoForm.extend);
      this.$set(formData, 'is_show', this.baseInfoForm.is_show);
      this.$set(formData, 'meal_type', this.baseInfoForm.meal_type);
      this.$set(formData, 'OneMeal', this.baseInfoForm.OneMeal);
      this.$set(formData, 'ManyMeal', this.baseInfoForm.ManyMeal);
      this.$set(formData, 'is_copy', this.baseInfoForm.is_copy);
      this.$set(formData, 'buy_type', 1)


      var list = [];
      if(this.detailForm.traitArr1.key && this.detailForm.traitArr1.val){
        list.push(this.detailForm.traitArr1);
      }
      if(this.detailForm.traitArr2.key && this.detailForm.traitArr2.val){
        list.push(this.detailForm.traitArr2);
      }
      if(this.detailForm.traitArr3.key && this.detailForm.traitArr3.val){
        list.push(this.detailForm.traitArr3);
      }
      this.$set(formData, 'traits', list.length>0 ? JSON.stringify(list) : "",);
      return formData;
    },
   
     handleSubmit(name) {
      this.$store.dispatch("settings/setEdit", false);
      let formData = this.summarizeData();
      console.log("formData",formData)

      if (formData.store_name == '') {
        this.currentTab = '1';
        this.$message.error('请添加产品名称');
        return;
      }
      if (!formData.cate_id) {
        this.currentTab = '1';
        this.$message.error('请选择产品分类');
        return;
      }
      if (formData.image == '') {
        this.currentTab = '1';
        this.$message.error('请添加产品封面图');
        return;
      }

      if (formData.slider_image == '') {
        this.currentTab = '1';
        this.$message.error('请添加产品轮播图');
        return;
      }

      // 检验单套餐

      // 检验多套餐
      if(formData.meal_type == 1 && !this.checkManyMealRoute(formData.ManyMeal) ){
        this.currentTab = '4';
        // this.$message.warning('行程校验未通过 ');
        return
      }
      // 校验价格日历

      this.$refs[name].validate(valid => {
        if (valid) {
          this.fullscreenLoading = true;
          this.loading = true;
           saveTourProductApi(formData)
                .then(async res => {
                  this.fullscreenLoading = false;
                  this.$message.success(res.message);
                  this.$router.push({ path: this.roterPre + "/tour/ticket" });
                  this.loading = false;
                })
                .catch(res => {
                  this.fullscreenLoading = false;
                  this.loading = false;
                  this.$message.error(res.message);
                });
          
        } 
          
      });
    
     
    },


     checkManyMealRoute(ManyMeal){

       if(!ManyMeal.length){
         this.$message.error("请先添加产品套餐");
         return false;
       }
     

      
       return flag;
    },
    checkOneMealRoute(OneMeal){

     
     
    },

    submitSave(){
      // 保存基础信息
      if(this.currentTab == "1"){
        this.saveBaseInfo()
        return
      }

       // 保存产品描述
       if(this.currentTab == "2"){
        this.saveDesc()
        return
      }
      if(this.currentTab == "3"){
        // this.saveRoute()
        return
      }
      //保存条款
      if(this.currentTab == "4"){
        this.saveCaluse()
        return
      }
   
    },
   
    //预览
    handlePreview(name) {
     
    },

    saveBaseInfo(){
      // 跟团游6
      this.$refs["baseInfoForm"].validate(valid => {
        if (valid) {
          this.fullscreenLoading = true;
          this.loading = true;
          let disCreate = this.product_id;
          disCreate
            ? productUpdateBaseInfoApi(this.product_id, this.baseInfoForm)
                .then(async res => {
                  this.fullscreenLoading = false;
                  this.$message.success(res.message);
                  this.loading = false;
                })
                .catch(res => {
                  this.fullscreenLoading = false;
                  this.loading = false;
                  this.$message.error(res.message);
                })
            : productSaveBaseInfoApi(this.baseInfoForm)
                .then(async res => {
                  this.product_id = res.data.product_id;
                  this.$route.params.id = res.data.product_id;
                  this.fullscreenLoading = false;
                  this.$message.success(res.message);
                  this.loading = false;
                })
                .catch(res => {
                  this.fullscreenLoading = false;
                  this.loading = false;
                  this.$message.error(res.message);
                });
        } else {
          if (!this.baseInfoForm.store_name.trim()) {
            return this.$message.warning("基本信息-产品主标题不能为空");
          }
          if (!this.baseInfoForm.store_info) {
            return this.$message.warning("基本信息-产品副标题不能为空");
          }
          if (!this.baseInfoForm.image) {
            return this.$message.warning("基本信息-产品封面图不能为空");
          }
          if (!this.baseInfoForm.cate_id) {
            return this.$message.warning("基本信息-平台产品分类不能为空");
          }
          if (this.baseInfoForm.slider_image.length < 0) {
            return this.$message.warning("基本信息-产品轮播图不能为空");
          }
          if (!this.baseInfoForm.day_time) {
            return this.$message.warning("基本信息-请输入行程天数");
          }
          if (!this.baseInfoForm.start_city) {
            return this.$message.warning("基本信息-请选择出发城市");
          }
      
          if (!this.baseInfoForm.end_city) {
            return this.$message.warning("基本信息-请输入目的城市");
          }

        }
      });
    },

    saveDesc(){
      if(!this.product_id){
        return this.$message.error("请先保存产品信息")
      }
      // if(!this.content){
      //   return  this.$message.warning("基本信息-请填写产品特色");
      // }
      var list = [];
      if(this.detailForm.traitArr1.key && this.detailForm.traitArr1.val){
        list.push(this.detailForm.traitArr1);
      }
      if(this.detailForm.traitArr2.key && this.detailForm.traitArr2.val){
        list.push(this.detailForm.traitArr2);
      }
      if(this.detailForm.traitArr3.key && this.detailForm.traitArr3.val){
        list.push(this.detailForm.traitArr3);
      }
      this.fullscreenLoading = true;
      this.loading = true;
      console.log("list",list)
      productUpdatDescApi(this.product_id, {
        traits: list.length>0 ? JSON.stringify(list) : "",
        content: this.content
      })
        .then(async res => {
          this.fullscreenLoading = false;
          this.$message.success(res.message);
          this.loading = false;
        })
        .catch(res => {
          this.fullscreenLoading = false;
          this.loading = false;
          this.$message.error(res.message);
        })
    },

    saveRoute(data){
       // 跟团游6
       if(!this.product_id){
        return this.$message.error("请先保存产品信息")
      }
       this.routeForm = data;
      
     
       console.log("this.routeForm",this.routeForm)



       this.fullscreenLoading = true;
          this.loading = true;
          productUpdatRouteApi(this.product_id, {routeForm: this.routeForm})
          .then(async res => {
            this.fullscreenLoading = false;
            this.$message.success(res.message);
            this.loading = false;
          })
          .catch(res => {
            this.fullscreenLoading = false;
            this.loading = false;
            this.$message.error(res.message);
          })
    },
    
    saveCaluse(){
      if(!this.product_id){
        return this.$message.error("请先保存产品信息")
      }
      var fee_list = [];
      for(var i = 0; i < this.caluseForm.fee_list.length; i++){
        this.caluseForm.fee_list[i].product_id = this.product_id;
          fee_list.push({
            product_id: this.caluseForm.fee_list[i].product_id,
            title:  this.caluseForm.fee_list[i].title,
            type: this.caluseForm.fee_list[i].type,
            value: this.caluseForm.fee_list[i].value,
          })
      }


      var nofee_list = [];
      for(var i = 0; i < this.caluseForm.nofee_list.length; i++){
        this.caluseForm.nofee_list[i].product_id = this.product_id;
          nofee_list.push({
            product_id: this.caluseForm.nofee_list[i].product_id,
            title:  this.caluseForm.nofee_list[i].title,
            type: this.caluseForm.nofee_list[i].type,
            value: this.caluseForm.nofee_list[i].value,
          });
      }
    
      var child_notice = [];
      for(var i = 0; i < this.caluseForm.child_notice.length; i++){
        this.caluseForm.child_notice[i].product_id = this.product_id;
        child_notice.push({
            product_id: this.caluseForm.child_notice[i].product_id,
            title:  this.caluseForm.child_notice[i].title,
            type: this.caluseForm.child_notice[i].type,
            value: this.caluseForm.child_notice[i].value,
          });
      }
      // if(!this.caluseForm.refund_rule){
      //   return this.$message.error("条款维护-请填写退改规则");
      // }

      var limit_list = [];
      for(var i = 0; i < this.caluseForm.child_limit.length; i++){
        if(this.caluseForm.child_limit[i].check == true){
          // delete this.caluseForm.child_limit[i].check;
          this.caluseForm.child_limit[i].product_id = this.product_id;
          limit_list.push({
            limit_type: this.caluseForm.child_limit[i].limit_type,
            product_id:  this.caluseForm.child_limit[i].product_id,
            type: this.caluseForm.child_limit[i].type,
            value: this.caluseForm.child_limit[i].value,
          });
        }
      }
      for(var i = 0; i < this.caluseForm.age_limit.length; i++){
        if(this.caluseForm.age_limit[i].check == true){
          // delete this.caluseForm.age_limit[i].check;
          this.caluseForm.age_limit[i].product_id = this.product_id;
          limit_list.push({
            limit_type: this.caluseForm.age_limit[i].limit_type,
            product_id:  this.caluseForm.age_limit[i].product_id,
            type: this.caluseForm.age_limit[i].type,
            value: this.caluseForm.age_limit[i].value,
          });
        }
      }
      for(var i = 0; i < this.caluseForm.people_limit.length; i++){
        if(this.caluseForm.people_limit[i].check == true){
          // delete this.caluseForm.people_limit[i].check;
          this.caluseForm.people_limit[i].product_id = this.product_id;
          limit_list.push({
            limit_type: this.caluseForm.people_limit[i].limit_type,
            product_id:  this.caluseForm.people_limit[i].product_id,
            type: this.caluseForm.people_limit[i].type,
            value: this.caluseForm.people_limit[i].value,
          });
        }
      }
    
      var fee_arr = fee_list.concat(nofee_list).concat(child_notice);

      for(var i = 0; i <  this.caluseForm.refund_rate.length; i++){
        this.caluseForm.refund_rate[i].product_id = this.product_id;
        this.caluseForm.refund_rate[i].sort = i+1;
      }
      this.$refs["caluseForm"].validate(valid => {
        if (valid) {
     
          this.fullscreenLoading = true;
          this.loading = true;
          productUpdatCaluseApi(this.product_id, 
          {fee_arr: fee_arr, book_desc: this.caluseForm.book_desc ,limit_list: limit_list, refund_rule: this.caluseForm.refund_rule, refund_rate: this.caluseForm.refund_rate})
          .then(async res => {
            this.fullscreenLoading = false;
            this.$message.success(res.message);
            this.loading = false;
          })
          .catch(res => {
            this.fullscreenLoading = false;
            this.loading = false;
            this.$message.error(res.message);
          })
         
        } else {
          return this.$message.error("条款服务-参数校验未通过");
        }
      });
    },

    saveSku(){
      console.log("this.skuForm",this.skuForm)

      if(!this.product_id){
        return this.$message.error("请先保存产品信息")
      }
      if (this.skuForm.spec_type === 1) {
        this.skuForm.attrValue = this.ManyAttrValue;
      } else {
        this.skuForm.attrValue = this.OneattrValue;
        this.skuForm.attr = [];
      }
      if(!this.skuForm.attrValue.length){
        return this.$message.error("请添加规格")
      }


      this.fullscreenLoading = true;
      this.loading = true;
      console.log('this.skuForm',this.skuForm)
      productUpdateSkuApi(this.product_id, this.skuForm)
      .then(async res => {
        this.fullscreenLoading = false;
        this.$message.success(res.message);
        this.loading = false;
      })
      .catch(res => {
        this.fullscreenLoading = false;
        this.loading = false;
        this.$message.error(res.message);
      })
    },
    savePriceDate(){
      console.log("this.skuForm",this.skuForm)

      if(!this.product_id){
        return this.$message.error("请先保存产品信息")
      }
    
   
      if(!this.skuForm.addDateList.length){
        return this.$message.error("请检查价格日历是否添加")
      }


      this.fullscreenLoading = true;
      this.loading = true;
      console.log('this.skuForm',this.skuForm)
      productUpdatePriceDateApi(this.product_id, this.skuForm)
      .then(async res => {
        this.getInfo()
        this.fullscreenLoading = false;
        this.$message.success(res.message);
        this.loading = false;
        this.skuForm.addDateList = [];
      })
      .catch(res => {
        this.fullscreenLoading = false;
        this.loading = false;
        this.$message.error(res.message);
      })
    },

    checkCaluseForm(){
      var fee_list = [];
      for(var i = 0; i < this.caluseForm.fee_list.length; i++){
        if(this.caluseForm.fee_list[i].check == true){
          this.caluseForm.fee_list[i].product_id = this.product_id;
          fee_list.push(this.caluseForm.fee_list[i]);
        }
      }
      // if(fee_list.length<=0){
      //   return this.$message.error("条款维护-请至少添加一条费用包含条目");
      // }

      var nofee_list = [];
      for(var i = 0; i < this.caluseForm.nofee_list.length; i++){
        if(this.caluseForm.nofee_list[i].check == true){
          this.caluseForm.nofee_list[i].product_id = this.product_id;
          nofee_list.push(this.caluseForm.nofee_list[i]);
        }
      }
      // if(nofee_list.length<=0){
      //   return this.$message.error("条款维护-请至少添加一条费用不包含条目");
      // }
      // if(!this.caluseForm.refund_rule){
      //   return this.$message.error("条款维护-请填写退改规则");
      // }

      return false;
    },
  
    addRefundRate(){
      this.caluseForm.refund_rate.splice(- 1, 0, {
        type: 1,
        refund_time: '',
        value: 0,
      });
    },
    addCaluseFee(){
      this.caluseForm.fee_list.push(
        {
          type: 1,
          title: '' ,
          value: ''
        }
      );
    },
    addCaluseNoFee(){
      this.caluseForm.nofee_list.push(
        {
          type: 2,
          title: '' ,
          value: ''
        }
      );
    },
    addCaluseChildNotice(){
      this.caluseForm.child_notice.push(
        {
          type: 3,
          title: '' ,
          value: ''
        }
      );
    },
    delCaluseChildNotice(index){
      this.caluseForm.child_notice.splice(index, 1)
    },
    delCaluseFee(index){
      this.caluseForm.fee_list.splice(index, 1)
    },
    delCaluseNoFee(index){
      this.caluseForm.nofee_list.splice(index, 1)
    },
    delRufundRate(index){
      this.caluseForm.refund_rate.splice(index, 1)
    },
      // 删除视频；
    delVideo() {
      const that = this
      that.$set(that.baseInfoForm, 'video_link', '')
    },
    zh_uploadFile() {
      if (this.videoLink) {
        this.baseInfoForm.video_link = this.videoLink
      } else {
        this.$refs.refid.click()
      }
    },
    zh_uploadFile_change(evfile) {
      const that = this
      that.progress = 10
      const suffix = evfile.target.files[0].name.substr(
        evfile.target.files[0].name.lastIndexOf('.')
      )
      if (suffix !== '.mp4') {
        return that.$message.error('只能上传MP4文件')
      }
      productGetTempKeysApi().then(res => {
        that.$videoCloud
        .videoUpload({
          type: res.data.type,
          evfile: evfile,
          res: res,
          uploading(status, progress) {
            that.upload.videoIng = status
          }
        })
        .then(res => {
          that.baseInfoForm.video_link = res.url || res.data.src
          that.$message.success('视频上传成功')
          that.progress = 100
        })
        .catch(res => {
          that.upload.videoIng = false
          that.$message.error(res.msg&&res.msg.message || res.message)
        })
      })
    },

    // 表单验证
    validate(prop, status, error) {
      if (status === false) {
        this.$message.warning(error);
      }
    },
    // 规格图片验证
    specPicValidate(ManyAttrValue) {
      for (let i = 0; i < ManyAttrValue.length; i++) {
        if (ManyAttrValue[i].image === "" || !ManyAttrValue[i].image) {
          this.$message.warning("请上传产品规格图！");
          this.picValidate = false;
          break;
        }
      }
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.baseInfoForm.slider_image];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.baseInfoForm.slider_image = newItems;
    },
    leave(){
      const p = new Promise((resolve, reject) => {

        reject()

        })

        return p
    },
   
  }
};
</script>
<style scoped lang="scss">
.bg {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}
.goods_detail .goods_detail_wrapper {
  z-index: -10;
}
.iframe-box{
  min-height: 300px;
}
::v-deep .specsList th{
  line-height: 20px!important;
}
::v-deep .specsList th{
  line-height: 20px!important;
}
::v-deep .lytext .el-textarea__inner {
  height: 36px;
}
::v-deep .el-checkbox__inner {
  height: 18px;
  width: 18px;
}

::v-deep  .el-checkbox__input.is-checked .el-checkbox__inner::after {
  top: 2px;
  left: 6px;
}
.proCoupon ::v-deep .el-form-item__content {
  margin-top: 5px;
}
.tabPic {
  width: 40px !important;
  height: 40px !important;
  img {
    width: 100%;
    height: 100%;
  }
}
.noLeft ::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
.explanation{
  color: #909399;
}
.tabNumWidth ::v-deep .el-input-number--medium {
  width: 100px;
}
.tabNumWidth ::v-deep .el-input-number__increase {
  width: 20px !important;
  font-size: 12px !important;
}
.tabNumWidth ::v-deep .el-input-number__increase {
  width: 20px !important;
  font-size: 12px !important;
}
.tabNumWidth ::v-deep .el-input-number__decrease {
  width: 20px !important;
  font-size: 12px !important;
}
.tabNumWidth ::v-deep .el-input-number--medium .el-input__inner {
  padding-left: 25px !important;
  padding-right: 25px !important;
}
.priceBox ::v-deep .el-input__inner {
  padding-right: 15px;
}
.el-input-number.is-controls-right .el-input__inner{
  padding-right: 15px !important;
}
.tabNumWidth ::v-deep .priceBox .el-input-number__decrease,
.tabNumWidth ::v-deep .priceBox .el-input-number__increase{
  display: none;
}
.tabNumWidth ::v-deep .priceBox.el-input-number--small{
  width: 90px!important;
}
.tabNumWidth ::v-deep .el-select {
  width: 120px;
}
.tabNumWidth ::v-deep thead {
  line-height: normal !important;
}
.tabNumWidth ::v-deep .cell {
  line-height: normal !important;
  text-overflow: clip !important;
}
.seeCatMy {
  color: var(--prev-color-primary);
  cursor: pointer;
}	
.selectOn{
	color: var(--prev-color-primary);
}	
.virtual_boder {
  border: 1px solid var(--prev-color-primary);
}
.virtual_boder2 {
  border: 1px solid #e7e7e7;
}
.virtual_san {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom: 26px solid var(--prev-color-primary);
  border-left: 26px solid transparent;
}
.virtual_dui {
  position: absolute;
  bottom: -2px;
  right: 2px;
  color: #ffffff;
  font-family: system-ui;
}
.virtual {
  width: 120px;
  height: 60px;
  background: #ffffff;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
  padding-top: 8px;
  position: relative;
  cursor: pointer;
  line-height: 23px;
  .virtual_top {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
  .virtual_bottom {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
  }
}
.virtual:nth-child(2n) {
  margin: 0 12px;
}
.desc{
  color: #999999;
  font-size: 12px;
}
.addfont {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  color: var(--prev-color-primary);
  margin-left: 14px;
  cursor: pointer;
}
.titTip {
  display: inline-bolck;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
}
.addCustom_content {
  margin-top: 20px;
  .custom_box {
    margin-bottom: 10px;
  }
}
.addCustomBox {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--prev-color-primary);
  .btn {
    cursor: pointer;
    width: max-content;
  }
  .remark {
    display: flex;
    margin-top: 14px;
  }
}
.pageWidth {
  width: 460px;
}
.duanWidth{
  width: 200px;
}
.ml15 {
  margin-left: 15px;
}
.button-new-tag {
  height: 28px;
  line-height: 26px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
}
.iview-video-style {
  width: 40%;
  height: 180px;
  border-radius: 10px;
  background-color: #707070;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}
.iconv {
  color: #fff;
  line-height: 180px;
  display: inherit;
  font-size: 26px;
  position: absolute;
  top: -74px;
  left: 50%;
  margin-left: -25px;
}
.iview-video-style .mark {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
.uploadVideo {
  margin-left: 10px;
}
.perW50 {
  width: 50%;
}
.submission {
  margin-left: 10px;
}
.btndel {
  position: absolute;
  z-index: 1;
  width: 20px !important;
  height: 20px !important;
  left: 46px;
  top: -4px;
}
.labeltop ::v-deep .el-form-item__label {
  float: none !important;
  display: inline-block !important;
  margin-left: 120px !important;
  width: auto !important;
}
::v-deep .upload-form-coupon{
  width: 900px!important;
}

.ifam {
  width: 344px;
  height: 644px;
  background: url('../../../../assets/images/phonebg.png') no-repeat center top;
  background-size: 344px 644px;
  padding: 40px 20px;
  padding-top: 50px;
  margin: 0 auto 0 20px;

  .content {
    height: 560px;
    overflow: hidden;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }

  .content::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.day-title{
  width: 100px;
  padding: 5px 10px;
  background: linear-gradient(90deg, #b0d5f3 0%, #fff 100%, #fff 100%);
  border-radius: 5px;
  color: #000;
  font-weight: 700;
  font-size: 16px;
}

.daily_itinerary_con {
  padding: 10px 0 0 74px
}

.daily_itinerary_sub_item {
  position: relative;
  padding-bottom: 0;
}
.daily_itinerary_item .daily_itinerary_sub_item::after,.daily_itinerary_item .daily_itinerary_sub_item::before {
  border-left: 1px dashed #ccc;
  height: 50%;
  z-index: 0;
  position: absolute;
  left: -66px;
  display: block;
  width: 1px;
  content: ""
}
.daily_itinerary_item .daily_itinerary_sub_item::before {
  top: 0;
}
.daily_itinerary_item .daily_itinerary_sub_item::after {
  bottom: 0;
}
.daily_itinerary_sub_time {
  width: 100px;
  //min-height: 40px;
  z-index: 1;
  background: #fff;
  position: absolute;
  left: -76px;
  top: 0;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  //flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  //justify-content: center;
  font-size: 14px
}
.daily_itinerary_sub_info {
  padding-bottom: 24px;
  min-height: 52px;
  font-size: 14px;
  margin-left: 30px;
}
.priceDateBox{
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.carMywrapper{
  .download{
    margin-left: 10px;
  }
  .stock-disk{
    margin: 10px 0 15px 0;
  }
  .scroll-virtual {
    max-height: 320px;
    overflow-y: auto;
    margin-top: 10px;
  }
  .virtual-title {
    width: 50px;
  }
  .deteal-btn {
    color: #5179ea;
    cursor: pointer;
  }
  .add-more {
    margin-top: 20px;
    line-height: 32px;

  }

}
::v-deep .el-input-group--append .el-input__inner{
  padding-right: 0;
}
::v-deep .el-calendar-table .el-calendar-day {

  height: 200px;
}
.fix-rb{
  position: fixed;
  right:120px;
  bottom: 80px;
}
.meal-bl-noselect {
    border-radius: 5px;
    max-width: 200px;
    border: 1px solid #e5e5e5;
    background: #f7f7f7;
    padding: 5px 10px;
    color: #000;
    font-weight: 700;
    max-height: 120px;
    line-height: 30px;
}
.meal-bl-select {
    border-radius: 5px;
    max-width: 200px;
    border: 1px solid #3c72e4;
    background: #f5f8ff;
    padding: 5px 10px;
    color: #000;
    font-weight: 700;
    max-height: 120px;
     line-height: 30px;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    -webkit-box-shadow: 0 -1px 4px rgba(0, 0, 0, .1);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
}


 
.del-box{
		position: absolute;
		right: -25px;
		top: -18px;
		cursor: pointer;
		.iconfont{
			color: #8f8f8f;
			font-size: 24px;
		}
	}
</style>
